# Component: Articles

Collection wrapper for multiple article items

Collection Controller

![[Pasted image 20260426081259.png]]

### BEM Anatomy

| Type      | Class Name            | Description                                                                                          |
| --------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-articles`        | The main container for an article collection.                                                        |
| Modifier  | `--[displaytype]`     | Injected based on view mode (e.g., `--card`, `--hero`, `--list`).                                    |
| Element   | `__row`               | The grid wrapper. Overrides Bootstrap gutters for consistent spacing.                                |
| Element   | `__item`              | The grid column wrapping an individual article renderer.                                             |
| Element   | `__pagination`        | Centered container for the "Load More" functionality.                                                |
| Element   | `__state`             | Container for non-content views (Modifiers: `--loading`, `--empty`).                                 |
| Element   | `__button`            | The base styling for interaction triggers within the collection scope.                               |
| Modifier  | `__button--load-more` | Specific style for the pagination trigger, often making it full-width or distinct from item buttons. |

### Implementation Reference

##### Generated HTML

```html
<div class="as-articles as-articles--card">
    <div class="as-articles__row row">
        <div class="as-articles__item col-md-4">
            <!-- ArticleItem Renderer (Card/Hero/List) -->
            <div class="as-article-item">...</div>
        </div>
    </div>

    <div class="as-articles__pagination">
        <button class="as-articles__button as-articles__button--load-more btn">
            Load More
        </button>
    </div>
</div>
```

##### SCSS

```scss
.as-articles {
  &__row {
    // Customizing Bootstrap Gutters
    --bs-gutter-x: #{$spacer};
    --bs-gutter-y: #{$spacer};
  }
  
  &__pagination {
    text-align: center;
    margin-top: $spacer * 1.5;
  }

  &__state {
    &--loading { /* Styling for loader */ }
    &--empty   { /* Styling for no items */ }
  }
}
```

